<template>
  <view class="nav-bar-container">
    <navigator :url="`/pages/${item.pageUrlKey}/${item.pageUrlKey}`" open-type="switchTab" hover-class="navigator-hover"
      v-for="item in  navList " :key="item.text" class="nav-item"
      :style="{ paddingBottom: $safeArea.safeAreaBottom + 'px' }" :class="item.pageUrlKey == pageKey ? 'active' : ''">
      <view>
        <uni-icons custom-prefix="iconfont" :type="item.icon" size="30"
          :color="item.pageUrlKey == pageKey ? '#f0ad4e' : '#666'"></uni-icons>
      </view>
      <text>{{ item.text }}</text>
    </navigator>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  pageKey: string
}>()


const navList = [{
  icon: "icon-dingdan",
  text: "首页",
  pageUrlKey: "index"
}, {
  icon: "icon-fenlei",
  text: "分类",
  pageUrlKey: "category"
}, {
  icon: "icon-dingdan",
  text: "订单",
  pageUrlKey: "order"
}, {
  icon: "icon-cart-search",
  text: "购物车",
  pageUrlKey: "cart"
}, {
  icon: "",
  text: "我的",
  pageUrlKey: "my"
}]
</script>

<style lang="scss" scoped>
.nav-bar-container {
  display: flex;
  justify-content: space-around;
  background-color: #fff;

  .nav-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 20%;
    padding: 5px 0;
    font-size: 14px;
    font-weight: 400;
  }

  .active {
    color: $uni-color-warning;

    :deep(.uni-icons) {
      color: $uni-color-warning !important;
    }
  }
}
</style>
